<template>
  <div class="real-time-box" :style="layoutStyle">
    <div class="flex items-center">
      <h3 class="title mr-10">{{ title }}</h3>
      <div>
        <span class="subtitle">更新时间：{{ realTime ? realTime : currentTime }}</span>
        <i class="el-icon-refresh icon" @click="refresh" />
        <i v-if="!isShow" class="el-icon-view icon" @click="switchHandle" />
        <svg-icon style="cursor: pointer" v-else icon-class="close-eye" @click="switchHandle" />
      </div>
    </div>
    <slot :isShow="isShow" />
  </div>
</template>

<script>
export default {
  name: 'Refresh',
  components: {},
  props: {
    title: String,
    time: {
      type: String,
      default: ''
    },
    layout: {
      type: String,
      default: 'column'
    }
  },
  data() {
    return {
      realTime: '',
      isShow: false
    }
  },
  computed: {
    currentTime() {
      const currentTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      return this.time ? this.time : currentTime
    },
    layoutStyle() {
      return {
        display: 'flex',
        'flex-direction': this.layout
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    refresh() {
      this.$emit('refresh')
      this.realTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      this.$message.success('刷新成功！')
    },
    switchHandle() {
      this.isShow = !this.isShow
      this.$emit('switch-handle', !this.isShow)
    }
  }
}
</script>

<style lang="scss" scoped>
.real-time {
  &-box {
    display: flex;
    .title {
      font-size: 14px;
    }
    .subtitle {
      font-size: 14px;
    }
    .icon {
      width: 18px;
      height: 18px;
      margin: 0 5px;
      cursor: pointer;
    }
  }
}
</style>
